<!-- 配置搜索栏 -->
<template>
    <div class="min-h-screen">
        <header>
            <Navbar :search="search"/>
        </header>
        <main class="main-container flex flex-col text-white" v-if="apiStore.todayWeather">
            <div class="p-2 text-center bg-weather-secondary">
                你正在预览{{search}}的天气信息
                <span>，可以通过右上角的"+"号按钮保存起来</span>
            </div>
            <div class="container flex flex-col text-center mt-6 gap-4">
                <h1>{{`当日气温是：${apiStore.todayWeather.lives[0].temperature}摄氏度`}}</h1>
                <h1>{{`当日天气是：${apiStore.todayWeather.lives[0].weather}`}}</h1>
                <h1>{{`当日风向是：${apiStore.todayWeather.lives[0].winddirection}风`}}</h1>
                <h1>{{`当日风力是：${apiStore.todayWeather.lives[0].windpower}级`}}</h1>
            </div>
            <hr class="border-white border-opacity-10 mt-6">
            <div class="px-40">
                <weather-chart :search="search"/>
            </div>
        </main>
    </div>
</template>

<script setup>
import Navbar from './Navbar.vue';
import WeatherChart from './WeatherChart.vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useAPIStore } from '../store/ApiStore';

const apiStore = useAPIStore();
const route = useRoute();
const search = ref(route.query.search);

const todayWeatherData = async () => {
    apiStore.inputValue=search
    await apiStore.todayWeatherData();
    console.log(apiStore.todayWeather,11319);
  };
  onMounted(todayWeatherData)
</script>

<style scoped></style>